<template>
  <div class="mh100vh ovh" @click="modalType=0">
    <!--Modal组件起始位置-->
    <div :class="['fixed trbl0 trans3', modalType > 0 ? 'op10 zx10' : 'op0 zx-1 dn']" style="background:rgba(55,55,55,.6)">
      <div :class="['fixed bgf tx-50 l50 t15 rds5 trans5', modalType > 0 ? 'op10 zx20 ani-large' : 'op0 zx-1 ani-small']" style="width:600px;">
        <!--标题-->
        <div class="f ac pl10 rds5" style="background:#f5f7fa;">
          <div class="fs16 b f1 none pl20">弹框标题</div>
          <div @click.stop="isShowModal=false" class="f ac xc poi" style="height:50px;width:50px;"><svg t="1671764723022" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2737" width="12" height="12"><path d="M1007.603202 929.818395L592.684241 514.699473 1007.603202 99.780512c10.797891-10.797891 16.196837-24.795157 16.196837-38.992385 0-13.997266-5.398946-28.194493-16.196837-38.992384-21.595782-21.595782-56.388987-21.595782-77.984768 0L514.699473 436.914665 99.780512 21.795743C78.18473 0.199961 43.391525 0.199961 21.795743 21.795743s-21.595782 56.388987 0 77.984769l415.118922 414.918961L21.795743 929.818395c-21.595782 21.595782-21.595782 56.388987 0 77.984768s56.388987 21.595782 77.984769 0l414.918961-415.118922L929.818395 1007.603202c10.797891 10.797891 24.795157 16.196837 38.992384 16.196837 13.997266 0 28.194493-5.398946 38.992384-16.196837 21.395821-21.395821 21.395821-56.388987-0.199961-77.784807z" fill="#999999" p-id="2738"></path></svg></div>
        </div>
        <!--内容-->
        <div>
          <div class="pt30 pb30 tc">这里是内容</div>
          <div class="pt30 pb30 tc">这里是内容</div>
          <div class="pt30 pb30 tc">这里是内容</div>
        </div>
        <!--底部按钮-->
        <div class="f ac xe pt10 pl10 pr15 pb10 rds5" style="background:#f5f7fa;">
          <div @click.stop="modalType=0" class="g1aada7 poi mr10 rds4 f ac xc fs14" style="border:1px solid #1aada7;width:80px;height:32px;">取消</div>
          <div class="gf poi mr10 rds4 f ac xc fs14" style="background:#1AADA7;border:1px solid #1aada7;width:80px;height:32px;">确定</div>
        </div>
      </div>
    </div>
    <!--Modal组件结束位置-->
  </div>
</template>
<script src='./index.js'></script>
<style src="./index.css" scoped></style>